<template>
	<div>
		<div class="login_top">登录</div>
		<div class="login_bottom">
			<div class="telphone">
				<span>+86</span>
				<input type="text" placeholder="请输入手机号或邮箱" v-model="telphoneval">
			</div>
			<div class="password">
				<input type="text" placeholder="请输入验证码" v-model="passwordcode">
				<div class="box" @click="sendCode" v-show="sendc">发送验证码</div>
				<div class="second" v-show="secondbox">
					<span>{{time}}s后可重发</span>
				</div>
			</div>
		</div>
		<div class="btn">
			<button class="loginbtn" @click="getlogin">登录</button>
		</div>
	</div>
</template>

<script>
	export default {
		data(){
			return{
				time:60,
				secondbox:false,
				sendc:true,
				clearbox:null,
				telphone:'',
				telphoneval:'',
				passwordcode:'',
			}
		},
		methods:{
			sendCode:function(){
				this.sendc = false
				this.secondbox = true
				let clearbox = setInterval(()=>{
					if(this.time == 0 ){
						clearInterval(clearbox)
						this.clearbox = null
					}else{
						this.time--
						clearInterval(this.clearbox)
						this.clearbox = null
					}
				},1000)
				this.$http.post('http://chonghekj.com/daily/index.php/Home/user/getSmsCode',this.$qs.stringify({
					telphone:17835092682
				}))
				.then((res)=>{
					console.log(res)
				})
			},
			getlogin:function(){
				this.$http.post('http://chonghekj.com/daily/index.php/Home/user/login',this.$qs.stringify({
					telphone :this.telphoneval,
					smscode :this.passwordcode 
				}))
				.then((res)=>{
					// console.log(res)
					localStorage.setItem('userinfo',JSON.stringify({
						id:res.data.data.id,
						username:res.data.data.username,
						access_token:res.data.data.access_token
					}))
					this.$router.push({
						path:'/logindetail',
					})
				})
				
			}
		}
	}
</script>

<style lang="less">
	.login_top{
		width: 100%;
		height: 100px;
		background:#1989FA;
		color: #fff;
		font-size: 20px;
		text-align: center;
		line-height: 100px;
	}
	.login_bottom{
		margin-top: 40px;
		padding: 20px;
	}
	.telphone{
		padding: 10px 20px;
		border-bottom: 1px solid #ddd;
		span{
			padding: 0 16px 0 0;
			border-right: 2px solid #ddd;
		}
		input{
			border: none;
			padding: 0 0 0 16px;
		}
	}
	.password{
		margin-top: 30px;
		position: relative;
		input{
			width: 50%;
			border: none;
			padding:10px 20px;
			border-bottom: 1px solid #ddd;
		}
	}
	.box{
		position: absolute;
		top: 0;
		right: 0;
		width: 30%;
		border: 1px solid #616262;
		line-height: 30px;
		text-align: center;
		font-size: 13px;
	}
	.second{
		.box;
	}
	.loginbtn{
		border: none;
		width: 84%;
		height: 40px;
		color: #fff;
		font-size: 18px;
		border-radius: 6px;
		display: block;
		margin: 0 auto;
		margin-top: 30px;
		background: #1989FA;
	}
</style>
